<template>
  <div class="app-container">
    <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <!-- 一级分类 -->
      <el-select v-model="courseVo.classGrade" placeholder="年级"  @change="classGradeChanged">
        <el-option
          v-for="grade in coursesAndGrade.grades"
          :key="grade"
          :label="grade"
          :value="grade"
        />
        <!-- key是唯一表标识，label是显示名，value是值 -->
      </el-select>

      <!-- 一级分类 -->
      <el-select v-model="courseVo.courseName" placeholder="所授课程" @change="courseChanged">
        <el-option
          v-for="course in coursesAndGrade.courseNames"
          :key="course"
          :label="course"
          :value="course"
        />
        <!-- key是唯一表标识，label是显示名，value是值 -->
      </el-select>
      

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>

    </el-form>

    <el-table :data="list" border fit highlight-current-row style="text-align:center">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{ (page - 1) * limit + scope.$index + 1 }}</template>
      </el-table-column>

       <el-table-column prop="hiredate" label="年级" align="center"/>

      <el-table-column prop="stuName" label="学生姓名" align="center"/>

      <el-table-column prop="stuNumber" label="学号" align="center"/>

      <el-table-column prop="professionalName" label="专业名称" align="center"/>

      <el-table-column prop="classCode" label="班级代号" align="center"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="selectScore(scope.row.hiredate,scope.row.stuNumber,scope.row.stuName)"
          >成绩录入</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- -------------------------添加或修改学生信息弹框---------------------------------- -->

    <el-dialog title="成绩录入" :visible.sync="dialogFormVisible" :append-to-body="true" width="350px">
      <el-form :model="sysScore">
        <!-- <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="sysScore.stuName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>

        <el-form-item label="学生学号" :label-width="formLabelWidth">
          <el-input v-model="sysScore.stuNumber" autocomplete="off" style="width:300px"></el-input>
        </el-form-item> -->

        <el-form-item label="平时成绩" :label-width="formLabelWidth">
          <el-input-number v-model="sysScore.normalScore" :min="0" :max="100" label="平时成绩"></el-input-number>
        </el-form-item>

        <el-form-item label="期末成绩" :label-width="formLabelWidth">
          <el-input-number v-model="sysScore.endScore" :min="0" :max="100" label="期末成绩"></el-input-number>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="inputScore">确 定</el-button>
      </div>
    </el-dialog>

    <!-- -------------------------添加或修改学院信息弹框---------------------------------- -->

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"
    />
    <!-- 这里  @current-change="getList" 不用传页数，饿了么内部封装了，只需要调方法即可。这个方法加括号不行，分页换显示不了-->
  </div>
</template>


<script>
import org from "@/api/organization/organization.js"; //.js可以省略
import stu from "@/api/personnel/student";
import sc from "@/api/score/score";

export default {
  //2、写核心代码位置
  //data两种写法：
  // data:{
  // },
  data() {
    //定义数据变量和初始值
    return {
      coursesAndGrade:[],
      courseVo:{},
      //这里属性名可以自己起
      list: null, //查询之后接口返回集合
      total: 0,
      page: 1, //当前页
      limit: 5, //每页显示记录数
      studentDto: {}, //条件封装对象
      item: {},
      dialogFormVisible: false,
      // departmentList: {},
      // oneLevelList: {},
      // twoLevelList: {},
      // teacherDto: {},
      sysClassinfos:{},//所有专业下的班级
      sysScore:{},
      scoreInfoDto:{}//查询成绩录入回显
    };
  },
  created() {

    this.getTeacherCourse();
  },
  methods: {
    //获取当前老师有哪些课程
    getTeacherCourse(){
      sc.getTeacherCourse()
      .then(response => {
          this.coursesAndGrade = response.data.coursesAndGrade; 
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败
    },
    getList(page = 1) {
      this.page = page;

       

      sc
        .pageStudent(this.page, this.limit, this.courseVo)
        .then(response => {
          //response接口返回的数据
          // console.log(response)
          //6、打印返回的测试数据
          this.list = response.data.records; //records是后端接口返回的值
          this.total = response.data.total;
          //   console.log(this.list);
          //   console.log(this.total);
        }) //请求成功
        .catch(error => {
          console.log(error);
        }); //请求失败

        this.importStudentToScore()


    },
    importStudentToScore(){
//触发学生信息都加入成绩表，成绩为空
      sc.importStudentToScore(this.courseVo)
      .then(response => {
        this.$message({
          type: "success",
          message: "当前年级学生已初始化!"
        });
        }).catch(error => {
          console.log(error);
        }); //请求失败
    },

    courseChanged(value){
        console.log(value)
        this.courseVo.courseName = value
    },
    classGradeChanged(value){
      this.courseVo.classGrade = value
    },


    //查询单个学生成绩信息
    selectScore(classGrade,stuNumber,stuName){
        
        this.scoreInfoDto.classGrade = classGrade
        this.scoreInfoDto.stuNumber = stuNumber
        this.scoreInfoDto.courseName = this.courseVo.courseName

        sc.getScoreInfo(this.scoreInfoDto)
        .then(response => {
          this.sysScore = response.data.sysScore
        });

        //  this.sysScore.stuName = stuName
        // this.sysScore.stuNumber = stuNumber
        // console.log(this.sysScore.stuName)
        this.dialogFormVisible = true
    },

    //录入成绩
    inputScore(){
        console.log(this.sysScore)
        sc.inputScore(this.sysScore)
        .then(response=>{
            this.$message({
          type: "success",
          message: "录入成功!"
        });
        })
        this.dialogFormVisible = false;
    },



    // twoLevelChanged(){
    //    delete this.item.classCode;
    //     org.getClassCode(this.item.hiredate,this.item.professionalName)
    //     .then(response => {
        
    //     this.sysClassinfos = response.data.sysClassinfos
      
    //   });
    // },

    // //新增班级
    // saveStudentInfo() {
    //   stu.addStudent(this.item).then(response => {
    //     //添加成功
    //     //提示信息
    //     this.$message({
    //       type: "success",
    //       message: "添加成功!"
    //     });
    //     this.dialogFormVisible = false;
    //     this.getList();
    //   });
    // },

    // //查询单个学生详情
    // getStudentById(id) {
    //   stu
    //     .getStudentById(id)
    //     .then(response => {
    //       this.item = response.data.item;
    //       this.dialogFormVisible = true;
    //     }) //请求成功
    //     .catch(error => {
    //       console.log(error);
    //     }); //请求失败
    // },
    // //新增专业清空表单
    // saveClear() {
    //   this.item = {};
    //   this.dialogFormVisible = true;
    //   this.studentDto = {};
    // },
    // //新增或修改教师信息
    // saveOrUpdateStudentInfo() {
    //   if (!this.item.id) {
    //     this.saveStudentInfo();
    //   } else {
    //     this.updateStudent();
    //   }
    // },

    // //修改学院信息
    // updateStudent() {
    //   stu
    //     .updateStudent(this.item)
    //     .then(response => {
    //       this.item = {};
    //       this.dialogFormVisible = false;
    //       this.getList();
    //       this.$message({
    //         type: "success",
    //         message: "修改成功!"
    //       });
    //     }) //请求成功
    //     .catch(error => {
    //       console.log(error);
    //     });
    // },
    //删除用户
    // removeDataById(id) {
    //   this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(() => {
    //     stu
    //       .delStudent(id)
    //       .then(response => {
    //         this.$message({
    //           type: "success",
    //           message: "删除成功!"
    //         });
    //         this.getList();
    //       }) //请求成功
    //       .catch(error => {
    //         console.log(error);
    //       });
    //   });
    // }
  }
};
</script>